<!-- 搜索框和添加按钮，搜索框，以及用户名和手机号的输入框 -->
<template>
  <div>
    <el-card id="search">
      <el-row>
        <el-col :span="23">
          <!-- v-model绑定组件实现双向数据绑定，页面上用户输入的值会同步更新到该属性中 -->
          <el-input
            v-model="searchModel.healthGoals.goalCategory"
            placeholder="目标类别"
            clearable
          ></el-input>
          <el-input
            v-model="searchModel.healthGoals.specificGoal"
            placeholder="具体目标"
            clearable
          ></el-input>
          <el-button
            @click="getGoals"
            type="primary"
            round
            icon="el-icon-search"
          >查询
          </el-button
          >
        </el-col>
        <el-col :span="1">
          <el-button
            @click="openEditUi(null)"
            type="primary"
            icon="el-icon-plus"
            circle
          ></el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="roleList" stripe style="width: 100%">
        <el-table-column prop="goalCategory" label="目标类别" width="180"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="specificGoal" label="具体目标" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="startDate" width="180" label="开始日期"></el-table-column>
        <el-table-column prop="endDate" width="180" label="结束日期"></el-table-column>
        <el-table-column prop="progress" width="180" label="进展"></el-table-column>
        <el-table-column prop="remarks" width="180" label="备注"></el-table-column>
        <el-table-column label="操作" width="250">
          <!-- 删除和修改按钮 -->
          <template slot-scope="scope">
            <el-button @click="openEditUi(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="deleteRole(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 角色编辑信息弹出框 -->
    <el-dialog
      @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="editForm" ref="editFormRef" :rules="rules">
        <el-form-item label="目标类别" prop="goalCategory" :rules="[{required: true, message:'请输入目标类别', trigger: 'blur'}]" :label-width="formLabelWidth">
          <el-input v-model="editForm.goalCategory" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="具体目标" prop="specificGoal" :rules="[{required: true, message:'请输入具体目标', trigger: 'blur'}]" :label-width="formLabelWidth">
          <el-input v-model="editForm.specificGoal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate" :rules="[{required: true, message:'请输入开始日期', trigger: 'blur'}]" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editForm.startDate"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" :rules="[{required: true, message:'请输入结束日期', trigger: 'blur'}]" prop="endDate" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editForm.endDate"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="进展" prop="progress" :label-width="formLabelWidth">
          <el-input v-model="editForm.progress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks" :label-width="formLabelWidth">
          <el-input v-model="editForm.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import noticeApi from "@/api/noticeApi";
import goalApi from "@/api/goals";

export default {
  data() {
    return {
      //左边宽度
      formLabelWidth: "135px",
      //设置默认值不可见
      dialogFormVisible: false,
      editForm: {},
      title: "",
      total: 0,
      roleList: [],

      menuProps: {
        children: 'children',
        label: 'title'
      },

      searchModel: {
        healthGoals: {
          goalCategory: '',
          specificGoal: '',
        },
        pageNo: 1,
        // 默认显示数量
        pageSize: 10,
      },

      //表单规则配置
      rules: {
        noticeName: [
          {required: true, message: "请输入通知公告名", trigger: "blur"},
        ],
        noticeContent: [
          {required: true, message: "请输入通知公告内容", trigger: "blur"},
          {
            min: 2,
            max: 20,
            message: "长度需要在 2 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    changeStatus(id){
      noticeApi.changeStatus({id}).then(response => {
        this.$message({
          message: response.message,
          type: "success"
        });
      }).finally(()=>{
        this.getGoals();
      })
    },
    onSubmit() {
      let isOk = true;
      //触发表单的验证
      this.$refs.editFormRef.validate((valid) => {
        //校验表单是否通过，如果校验失败，设置 isOk 为 false
        isOk = valid;
      });
      //如果表单验证通过
      if (isOk) {
        //提交给后台
        goalApi.addGoals(this.editForm).then(response => {
          //保存成功提示
          this.$message({
            message: response.message,
            type: "success"
          });
          //关闭对话框
          this.dialogFormVisible = false;
          //刷新表格数据
          this.getGoals();
        });
      } else {
        //表单验证不通过
        console.log("表单验证不通过");
        return false;
      }
    },


    //清理表单数据
    clearForm() {
      this.editForm = {};
      //清除表单校验的提示信息
      this.$refs.editFormRef.clearValidate();
    },
    handleSizeChange(pageSize) {
      //数据更新
      this.searchModel.pageSize = pageSize;
      this.getGoals();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getGoals();
    },
    //查询列表
    getGoals() {
      goalApi.getGoals(this.searchModel).then((response) => {
        this.roleList = response.data.rows;
        this.total = response.data.total;
      });
    },

    openEditUi(row) {
      if (!row) {
        this.title = "新增健康目标";
      } else {
        this.title = "修改健康目标";
        //根据id查询角色数据
        this.editForm = row;
      }
      this.dialogFormVisible = true;
    },

    deleteRole(notice) {
      this.$confirm(`确认删除 ${notice.goalCategory} 这条记录吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goalApi.deleteGoals(notice.id).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          });
          this.getGoals();
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },

  //加载时就查询一次
  created() {
    this.getGoals();
  },
};
</script>
<style>

.el-dialog .el-input {
  width: 43%;
}
</style>
